var that
    //全局变量
class Tab {
    constructor(id) {
            //让constructor 里面的this保存下来
            that = this
            this.tab = document.querySelector(id)
            this.ul = this.tab.querySelectorAll('ul li')
            this.se = this.tab.querySelectorAll('section')
            this.add = this.tab.querySelector('.add')
            this.ull = this.tab.querySelector('.box_top_left ul')
            this.sect = this.tab.querySelector('.box_x')
            this.rem = this.tab.querySelectorAll('.lis2')
            console.log(this.se);
            console.log(this.add);
            console.log(this.rem);
            this.init()
        }
        //init是一个方法 ，需要调用 ,初始化
        //初始化操作让相关的元素绑定事件1
    init() {
        this.xing()
        this.add.onclick = this.tianjia
        for (var i = 0; i < this.ul.length; i++) {
            this.ul[i].index = i
            this.ul[i].onclick = this.qiehuan;
            this.rem[i].onclick = this.shanchu;
        }

    }
    xing() {
        this.ul = this.tab.querySelectorAll('ul li')
        this.se = this.tab.querySelectorAll('section')
        this.rem = this.tab.querySelectorAll('.lis2')
    }
    qiehuan() {
        //qiehuan里面this指向的是ul li ，所以内容板块需要把this换成that
        that.qingchu()
        this.className = 'lis1'
        that.se[this.index].className = 'nr1'
    }
    qingchu() {

        for (var i = 0; i < this.ul.length; i++) {
            this.ul[i].className = ''
            this.se[i].className = ''
        }
    }
    tianjia() {
        that.qingchu()
        var sj = Math.random();
        var li = '<li class="lis1"><span>新选项卡</span><span class="lis2">x</span></li>'
        that.ull.insertAdjacentHTML('beforeend', li)
        var section = ' <section class="nr1">测试' + sj + '</section>'
        that.sect.insertAdjacentHTML('beforeend', section)
        that.init()
    }
    shanchu(e) {
        e.stopPropagation()
        var index = this.parentNode.index
        console.log(index);
        that.ul[index].remove()
        that.se[index].remove()
        that.init()
        index--;
        that.ul[index].click()
    }
    xiugai() {}

}
new Tab('#tab')